﻿@using Pear.Web.Core
@inherits PearRazorPage<object>
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{ ViewData["Title"] = "部门管理";}
@section header
{

}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="Keyword" placeholder="" class="layui-input">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="department-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="department-reset">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="department-table" lay-filter="department-table"></table>
    </div>
</div>
@section footer
{

    <script type="text/html" id="department-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
            <i class="layui-icon layui-icon-spread-left"></i>
            展开
        </button>
        <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
            <i class="layui-icon layui-icon-shrink-right"></i>
            折叠
        </button>
    </script>

    <script type="text/html" id="department-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    </script>

    <script type="text/html" id="department-enabled">
        <input type="checkbox" name="enabled" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="department-enabled" {{ d.enabled  ? 'checked' : '' }} />
    </script>

    <script type="text/html" id="icon">
        <i class="layui-icon {{d.icon}}"></i>
    </script>

    <script>
        layui.use(['form', 'jquery', 'treetable','http'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let treetable = layui.treetable;
            let http = layui.http;
       
            var insTable = treetable.render({
                elem: '#department-table',
                url: '/api/department/all',
                method: 'get',
                toolbar: '#department-toolbar',
                height: 'full-200',
                tree: {
                    iconIndex: 1,
                    isPidData: true,
                    idName: 'id',
                    pidName: 'parentId',
                    arrowType: 'arrow2',
                    getIcon: ''
                },
                defaultToolbar: [{
                    layEvent: 'refresh', icon: 'layui-icon-refresh'
                },'filter', 'print', 'exports'],
                cols: [
                    [
                        { type: 'checkbox' },
                        { field: 'name', minWidth: 200, title: '名称' },
                        { field: 'icon', title: '图标', templet: '#icon' },
                        { field: 'email', title: '邮箱' },
                        { field: 'telephone', title: '电话' },
                        { field: 'enabled', title: '是否可用', templet: '#department-enabled' },
                        { title: '操作', templet: '#department-bar', width: 150, align: 'center' }
                    ]
                ]
            });
 
            treetable.on('tool(department-table)', function (obj) {
                if (obj.event === 'remove') {
                    window.remove(obj);
                } else if (obj.event === 'edit') {
                    window.edit(obj);
                }
            })

            treetable.on('toolbar(department-table)', function (obj) {
                if (obj.event === 'add') {
                    window.add();
                } else if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event === 'batchRemove') {
                    window.batchRemove(obj);
                } else if (obj.event === 'expandAll') {
                    insTable.expandAll();
                } else if (obj.event === 'foldAll') {
                    insTable.foldAll();
                }
            });

            form.on('submit(department-query)', function (data) {
                insTable.filterData(data.field.Keyword)
                return false;
            });

            form.on('submit(department-reset)', function (data) {
                insTable.clearFilter()
                return false;
            });

            window.add = function () {
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    area: ['450px', '500px'],
                    content: '@Html.Raw(@Url.Action("Add", "Department", new { area = "Admin" }))'
                });
            }

            window.edit = function (obj) {
                layer.open({
                    type: 2,
                    title: '修改',
                    shade: 0.1,
                    area: ['450px', '500px'],
                    content: '@Html.Raw(@Url.Action("Edit", "Department", new { area = "Admin" }))?id=' + obj.data['id']
                });
            }

            window.remove = function (obj) {
                layer.confirm('确定要删除该权限', { icon: 3, title: '提示' }, function (index) {
                    layer.close(index);
                    let loading = layer.load();

                    http.delete("/api/department/" + obj.data['id']).then((result) => {
                        layer.close(loading);
                        if (result.succeeded) {
                            layer.msg("删除成功", { icon: 1, time: 1000 }, function () {
                                window.refresh();
                            });
                        } else {
                            layer.msg("删除失败", { icon: 2, time: 1000 });
                        }
                    });
                });
            }

            window.refresh = function (param) {
                insTable.refresh();
            }

        })
    </script>
}